<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<style>
    .wrapper {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  border: 2px dotted blue;
}

.wrapper div{
  width: 300px;
  height: 300px;
  line-height: 200px;
  text-align: center;
  /*background: green;*/
  color: #fff;
  border-radius:150px;
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

 transition-property:all;
 transition-duration:1s;
}
.wrapper div:hover{
     -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-330deg);
  transform:rotate(320deg);
}
.wrapper span {
  display:block;
 
 }
</style>
</head> 
<body>
<div class="wrapper">
 <div class="rotate1"><span>我不想旋转(^_^)</span></div>
</div>
</body>
</html>